<template>
  <div>
    插值表达式：
    {{ $store.state.name }}
    {{ $store.state.count }}
    {{ $store.state.token }}
    <div>计算属性封装{{ name }}</div>
  </div>
</template>

<script>
export default {
  //如果觉得模板中每次都写完整的state路径非常麻烦
  //可以考虑封装到计算属性当中
  //原因
  // 1、它本身是作为数据渲染
  // 2、它可能后续会改变
  computed: {
    name() {
      return this.$store.state.name;
    },
  },
  created() {
    console.log(this.$store);
  },
};
</script>

<style>
</style>